<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap in practice: the grid system</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- Bootstrap CSS -->
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet" />

        <!-- To better visualize the columns -->
        <style>
        .row {
            margin-bottom: 20px;
        }
        .row > div {
            background-color: #dedef8;
            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
        }
        </style>

    </head>
    <body>
    <div class="container">

        <h1>Hello, world!</h1>

        <div class="row">
            <div class="col-xs-6">I’m on the left</div>
            <div class="col-xs-6">I’m on the right</div>
        </div>
        
        <div class="row">
            <div class="col-md-6">I’m on the left</div>
            <div class="col-md-6">I’m on the right</div>
        </div>
        
        <div class="row">
            <div class="col-lg-6">I’m on the left</div>
            <div class="col-lg-2 col-md-6">I’m on the left</div>
            <div class="col-lg-2 col-md-3 col-xs-6">I’m on the right</div>
            <div class="col-lg-2 col-md-3 col-xs-6">I’m on the right</div>
        </div>
        
        <div class="row">
            <div class="col-lg-6 col-md-8">I’m on the left</div>
            <div class="col-lg-6 col-md-4">I’m on the right</div>
        </div>
    </div>
    </body>
</html>